<!DOCTYPE html>
<html>
<head>
<title>在线编程</title>
<meta charset="UTF-8">
	<link rel=stylesheet href="lib/codemirror.css">
	<link rel=stylesheet href="doc/docs.css">
	<link rel=stylesheet href="addon/display/fullscreen.css">
	<link rel=stylesheet href="theme/3024-night.css">
	<link rel=stylesheet href="theme/midnight.css">
	<link rel=stylesheet href="theme/night.css">
	<link href="addon/hint/show-hint.css" rel="stylesheet">
	<script src="lib/codemirror.js"></script>
	<script src="mode/xml/xml.js"></script>
	<script src="mode/javascript/javascript.js"></script>
	<script src="mode/css/css.js"></script>
	<script src="mode/htmlmixed/htmlmixed.js"></script>
	<script src="addon/edit/matchbrackets.js"></script>

	<script src="addon/hint/show-hint.js"></script>
	<script src="addon/selection/active-line.js"></script>
	<script src="addon/display/fullscreen.js"></script>
	<script src="addon/hint/anyword-hint.js"></script>
	<script src="addon/hint/html-hint.js"></script>
	<script src="addon/hint/javascript-hint.js"></script>
	<script src="addon/hint/css-hint.js"></script>

	<link href="../../styles/bootstrap/bootstrap.min.css" rel="stylesheet">
	<script src="../../scripts/jquery.min.js"></script>
	<script src="../../scripts/bootstrap/bootstrap.min.js"></script>
	<!--<script src="doc/activebookmark.js"></script>-->






<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->

<!--<script type="text/javascript" src="js/jquery.min.js"></script>-->
<!--<script type="text/javascript" src="js/bootstrap.min.js"></script>-->



<style type="text/css">
body {
  padding-top: 50px;
}
.starter-template {
  padding: 40px 15px;
  
}
.CodeMirror-wrap{
	width: 50%;
}
.edit{

}
.container{
	width: 100%;
}

</style>
</head>
<body>

	<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
		<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="sr-only">切换导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">一起写代码吧</a>
		</div>
		<div class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
				<li class="active"><a>主页</a></li>
				<li><a href="jetbrick.template">bbbbbbbbbb</a></li>
				<li><a>saf页</a></li>
				<li><a>safa主页</a></li>
			</ul>
		</div>
		</div>
	</nav>
	<div class="container">

	<div class="edit">

		<textarea class="col-lg-6"  rows="50" cols="200" id="editorBox" style="width: 50%;" ></textarea>
		<!--<textarea class="col-lg-6"  rows="20" cols="100" id="result" style="width: 50%;" ></textarea>-->
	</div>
	</div>
	<script type="text/javascript">

		var editor = CodeMirror.fromTextArea(document.getElementById('editorBox'), {
			lineNumbers: true,     // 显示行数
			indentUnit: 4,         // 缩进单位为4
			extraKeys: {"Ctrl": "autocomplete"},//输入s然后ctrl就可以弹出选择项

			styleActiveLine: true, // 当前行背景高亮
			matchBrackets: true,   // 括号匹配
			mode: {name: "javascript", globalVars: true},
//			mode: 'htmlmixed',     // HMTL混合模式
			lineWrapping: true,    // 自动换行
			theme: 'night',      // 使用monokai模版
		});
//		editor.on('change', function() {
//			editor.showHint();  //满足自动触发自动联想功能
//		});
//		editor.setOption("extraKeys", {
//			// Tab键换成4个空格
//			Tab: function(cm) {
//				var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
//				cm.replaceSelection(spaces);
//			},
//			// F11键切换全屏
//			"F11": function(cm) {
//				cm.setOption("fullScreen", !cm.getOption("fullScreen"));
//			},
//			// Esc键退出全屏
//			"Esc": function(cm) {
//				if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
//			}
//		});
	</script>
</body>
</html>